﻿@{
    Layout = null;
    var count = ViewBag.count;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style>
        #app{
            display:none;
        }
        #Num{
            margin-left:120px;
            margin-top:-100px;
        }
                #commit{
             margin-left: 10px;
                    }
        </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="renderer" content="webkit|ie-comp|ie-stand" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link href="~/assets/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="~/css/style.css" />
    <link href="~/assets/css/codemirror.css" rel="stylesheet" />
    <link rel="stylesheet" href="~/assets/css/ace.min.css" />
    <link rel="stylesheet" href="~/font/css/font-awesome.min.css" />
    <link rel="stylesheet" href="~/layui-v2.5.4/layui/css/layui.css" />
    <!--[if lte IE 8]>
      <link rel="stylesheet" href="assets/css/ace-ie.min.css" />
    <![endif]-->
    <script src="~/Scripts/jquery-1.9.1.min.js"></script>
    <script src="~/assets/js/bootstrap.min.js"></script>
    <script src="~/assets/js/typeahead-bs2.min.js"></script>
    <script src="~/assets/js/jquery.dataTables.min.js"></script>
    <script src="~/assets/js/jquery.dataTables.bootstrap.js"></script>
    <script src="~/assets/layer/layer.js" type="text/javascript"></script>
    <script src="~/assets/laydate/laydate.js" type="text/javascript"></script>
    <script src="~/layui-v2.5.4/layui/layui.js"></script>
    <script src="~/Scripts/Format.js" type="text/javascript"></script>
    <title>网站底部导航管理</title>
</head>

<body>
    <div class="margin clearfix">
        <div class="" id="Other_Management">
            <div class="search_style">

                <ul class="search_content clearfix">
                    <li><label class="l_f">导航名称</label><input name="" type="text" id="name" class="text_add" placeholder="输入导航名称" style=" width:400px" /></li>
                    <li style="width:90px;"><button type="button" id="checkname" class="btn_search"><i class="fa fa-search"></i>查询</button></li>
                </ul>
            </div>
            <div class="border clearfix">
                <span class="l_f">
                    <a href="#" class="btn btn-danger" id="btn"><i class="fa fa-trash"></i>&nbsp;批量删除</a>
                    <a href="#" class="btn btn-danger" id="Add">&nbsp;添加</a>
                </span>
                <span class="r_f">共：<b>@count</b>条</span>
            </div>
            <div class="list_style">
                <div class="row">
                    <div class="col-sm-6">
                        <div class="dataTables_length" id="sample-table_length">
                            <label>
                                每页显示条数:
                                <select name="sample-table_length" id="Numbers" aria-controls="sample-table">
                                    <option value="10">10</option>
                                    <option value="25">25</option>
                                    <option value="50">50</option>
                                    <option value="100">100</option>
                                </select>
                            </label>

                           



                        </div>
                    </div><div class="col-sm-6">
                    </div>
                </div>
                <table class="layui-hide" id="test" lay-filter="test"></table>
                <script type="text/html" id="barDemo">
                    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                </script>
            </div>
        </div>
    </div>
    <div class="main" id="app">
        <!--右侧-->
        <div class="right">
            <fieldset class="layui-elem-field layui-field-title">
                <legend id="addrepair">添加</legend>
            </fieldset>
            <form class="layui-form ">
                <div class="layui-form-item">
                    <label class="layui-form-label">导航名</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" id="Name" required=required lay-verify="required" placeholder="" autocomplete="off" class="layui-input" style=" width:400px" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">导航地址</label>
                    <div class="layui-input-block">
                        <input type="text" name="file" id="Url" required=required lay-verify="required" placeholder="" autocomplete="off" class="layui-input" style=" width:400px" />
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">父Id</label>

                    <div class="layui-input-block">




                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <input type="button" id="commit" value="立即提交" class="layui-btn" lay-submit=lay-submit lay-filter="submit" />
                    </div>
                </div>
            </form>

        </div>
        <div class="layui-input-inline">
            <select id="Num"  style="width:100px;">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
            </select>
        </div>
    </div>

    <script>
    //默认
        layui.use('table', function () {
            var table = layui.table;
            table.render({
                elem: '#test'
                , url: '/Webcolumn/GetWebcolumnList'
                , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                , cols: [[
                    { type: 'checkbox' } //开启复选框
                    , { field: 'WebColumn_ParentId', title: 'ID', sort: true }
                    , { field: 'WebColumn_Name', title: '导航名', sort: true }
                    , { field: 'WebColumn_Url', title: '导航地址', sort: true }
                    , { field: 'WebColumn_CreateTime', title: '创建时间', sort: true, templet: "<div>{{Format(d.WebColumn_CreateTime,'yyyy-MM-dd hh:mm:ss')}}</div>" }
                    , { fixed: 'right', width: 165, align: 'center', toolbar: '#barDemo' }
                ]]
                , id: 'testReload'
            });
                //监听行工具事件
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            //console.log(obj)
            if (obj.event === 'del') {
                    layer.confirm('真的删除行么', function (index) {
                   $.ajax({
                    url: "/Webcolumn/DeleteWebcolumn?WebColumn_Id=" + data.WebColumn_Id,
                    type: "Post",
                    success: function (data) {
                        if (data.Success) {
                            layer.msg('删除成功！', {
                                title: '提示框',
                                icon: 1,
                                time: 2000
                            }, function () {
                                TableReload();
                                layer.close(index);
                            });
                            window.location.reload();
                    }
                        else {
                            layer.msg('删除失败！', {
                                title: '提示框',
                                icon: 1,
                                time: 2000
                            });
                        }
                    }
                });
                });
            } else if (obj.event === 'edit') {
            $("#addrepair").text("修改");
            layer.open({
            type: 1,
            title: "修改",
            area: ['700px', ''],
            shadeClose: false,
            content: $("#app"),
            });
                $("#Name").val(data.WebColumn_Name);//导航名
                $("#Url").val(data.WebColumn_Url);//导航地址
                var Num = '<option value="1">1</option>' + '<option value="2">2</option>' + '<option value="3">3</option>' + '<option value="4">4</option>';
                var Num1 = '<option value="2">2</option>' + '<option value="1">1</option>' + '<option value="3">3</option>' + '<option value="4">4</option>';
                var Num2 = '<option value="3">3</option>' + '<option value="1">1</option>' + '<option value="2">2</option>' + '<option value="4">4</option>';
                var Num3 = '<option value="4">4</option>' + '<option value="1">1</option>' + '<option value="2">2</option>' + '<option value="3">3</option>';
                if (data.WebColumn_ParentId == 1) {
                    $("#Num").html(Num);
                } else if (data.WebColumn_ParentId == 2) {
                    $("#Num").html(Num1);
                } else if (data.WebColumn_ParentId == 3) {
                    $("#Num").html(Num2);
                } else if (data.WebColumn_ParentId == 4) {
                    $("#Num").html(Num3);
                }
                $("#commit").click(function () {
                    if ($("#Name").val() != "" && $("#Name").val() != null && $("#Url").val() != "" && $("#Url").val() != null) {
                        var date = {};
                        date.WebColumn_Name = $("#Name").val();
                        date.WebColumn_Url = $("#Url").val();
                        date.WebColumn_ParentId = $("#Num").val();
                        date.WebColumn_CreateTime = Format(data.WebColumn_CreateTime,'yyyy-MM-dd hh:mm:ss');
                         $.ajax({
                        url: "/WebColumn/UpdateWebcolumn?WebColumn_Id=" + data.WebColumn_Id, 
                        data: date,
                        type: "post",
                        success: function (result) {
                            if (result.Success) {
                            layer.msg('修改成功！', {
                            title: '提示框',
                            icon: 1,
                            time: 400
                            })
                                window.location.reload();
                            }
                            else {
                            layer.msg('修改失败！', {
                            title: '提示框',
                            icon: 1,
                            time: 400
                            })
                                 window.location.reload();
                            }
                        }
                    })


                    } else {
                         layer.msg('不能为空！', {
                        title: '提示框',
                        icon: 1,
                        time: 400
                    })
                    }
                })
            }
        });


            //批量删除
       $("#btn").click(function () {
                                    //获取复选框集合数据
                                    var checkStatus = table.checkStatus('testReload');
                                    var data = checkStatus.data;
                                    //获得where限制条件Id
                                    var codeId = "";
                                    if (data.length == 0) {
                                        layer.msg('请选择一行', {
                                            title: '提示框',
                                            icon: 0,
                                            time: 2000

                                        });
                                        return;
                                    };
                                    //遍历集合,拼接字符串
                                    for (var i in data) {
                                        if (i == data.length - 1) {
                                            codeId += data[i].WebColumn_Id
                                        } else {
                                            codeId += data[i].WebColumn_Id + ",";

                                        }
                                    };
                                    //温馨提示是否要删除
                                    $.ajax({
                                        url: "/Webcolumn/BatchDelete?Id=" + codeId,
                                        traditional: true,
                                        type: "post",
                                        success: function (operate) {
                                            if (operate.Success) {

                     layer.msg('批量删除成功!！', {
                        title: '提示框',
                        icon: 1,
                        time: 400
                    })

                                                location.reload();//刷新页面 


                                            }
                                            else {
                        layer.msg('批量删除失败！', {
                        title: '提示框',
                        icon: 1,
                        time: 400
                    })
                                            }
                                        }
                                    })
                                })





        });
    </script>
    <script>
        $(function () {
            //模糊查询点击事件
            $("#checkname").click(function () {
                var table = layui.table;
                //获取查询值
                var name = $("#name").val();
                //获取显示页数
                var Number = $("#Numbers").val();
                //上述方法等价于
                table.reload('testReload', {
                    where: { //设定异步数据接口的额外参数，任意设
                        WebColumn_Name: name,
                        limit: Number
                    }
                });
            });

            //每页显示条数
            $("#Numbers").change(function () {
                var result = $(this).children('option:selected').val();
                if (result != "Fusion") {
                    var table = layui.table;
                    //获取显示页数 
                    var Number = $("#Numbers").val();
                    //上述方法等价于
                    table.reload('testReload', {
                        where: { //设定异步数据接口的额外参数，任意设
                            limit: Number
                        }
                    });
                }
            })

             //添加div点击事件
            $("#Add").click(function () {
            $("#addrepair").val("添加");
            layer.open({
            type: 1,
            title: "添加",
            area: ['700px', ''],
            shadeClose: false,
            content: $("#app"),
            });
            $("#Name").val(null);
            $("#Url").val(null);
             //添加点击事件 
                $("#commit").click(function () {
                 //非空验证
                if ($("#Name").val() != "" && $("#Name").val() != null && $("#Url").val() != "" && $("#Url").val() != null) {
                    var data = {};
                    data.WebColumn_Name = $("#Name").val();
                    data.WebColumn_Url = $("#Url").val();
                    data.WebColumn_ParentId = $("#Num").val();
                    $.ajax({
                        url: "/WebColumn/AddWebcolumn", 
                        data: data,
                        type: "post",
                        success: function (result) {
                            if (result.Success) {
                            layer.msg('添加成功！', {
                            title: '提示框',
                            icon: 1,
                            time: 400
                            })
                                window.location.reload();
                            }
                            else {
                            layer.msg('添加失败！', {
                            title: '提示框',
                            icon: 1,
                            time: 400
                            })
                                 window.location.reload();
                            }
                        }
                    })







                } else {
                                       layer.msg('不能为空！', {
                                        title: '提示框',
                                        icon: 1,
                                        time: 400
                                    })
                }
                })

            })
        })
    </script>
</body>
</html>
